<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周计划</title>
    <% include ../../layouts/import.ejs %>

</head>
<body>
<% include ../../layouts/header.ejs %>
<div class="index container" style="background: white;">
    <div class="row">
        <div class="col-lg-6">
            <h2>周计划</h2>
        </div>
        <div class="col-lg-3">
            <div class="checkbox" style="margin-top: 25px;text-align: right;">
                <label for="isLeader"><input type="checkbox" id="isLeader" value="false"/>团队视图</label>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="input-group" style="margin-top: 18px;">
                <input type="text" class="form-control" id="datetimepicker" value="">
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
        </div>
    </div>


    <div class="daily-container" id="dailyContainer">
    </div>

    <div class="daily-week-form">
        <div class="container">
            <textarea type="text" class="form-control daily-week-form-input" rows="3"
                      placeholder="输入格式：项目code 任务名称 指派给（loginName） 备注" id="taskContent">hyims 测试任务 user 好好</textarea>
        </div>
    </div>

</div>

<script>
    $(function () {
        //日期选择
        $('#datetimepicker').datetimepicker({
            format: 'yyyy-mm-dd',
            weekStart: 1,
            minView: 2,
            todayBtn: true,
            autoclose: true,
            todayHighlight: true,
            language: 'zh-CN'
        }).on('changeDate', function (ev) {
            loadData();
        });

        loadData();

        //是否团队数据
        $('#isLeader').click(function () {
            loadData()
        });

        //录入
        $('#taskContent').focus()
            .keydown(function (e) {
                if (e && e.keyCode === 13) {
                    var taskContent = $('#taskContent').val();
                    $.post('/daily/week/saveByString', {taskContent: taskContent}, function (result) {
                        loadData();
                    });
                    e.preventDefault(); //禁止换行
                }
            });
    });

    /**
     * 加载周计划数据
     * @param timestamp
     */
    function loadData() {
        var mondayTimestamp = $('#datetimepicker').datetimepicker('getDate').getTime();
        var checked = $('#isLeader').prop('checked');

        $.post('/daily/week/loadData', {isLeader: checked, selectedTimestamp: mondayTimestamp}, function (result) {
            console.log(result);
            if (result.errcode === 0) {
                var html = '';
                $.each(result.data, function (index, element) {
                    var processText = element.projectAllNum === 0 ? '0/0' : element.projectDoneNum + '/' + element.projectAllNum;
                    var processPercent = (element.projectDoneNum / element.projectAllNum) * 100;
                    html += '<div class="daily-project-container">' +
                        '<div class="daily-project-info row">' +
                        '<div class="col-lg-10">' +
                        '<span class="daily-project-name">' + element.projectName + '</span>' +
                        '<span class="daily-project-leader">负责人：' + element.projectLeaderName + '</span>' +
                        '<span class="label label-danger" style="margin-left: 10px;">紧急</span>' +
                        '</div>' +
                        '<div class="col-lg-2">' +
                        '<div class="progress">' +
                        '<div class="progress-bar" role="progressbar"' +
                        ' aria-valuenow="' + element.projectDoneNum + '" aria-valuemin="0"' +
                        ' aria-valuemax="' + element.projectAllNum + '"' +
                        ' style="width: ' + processPercent + '%;">' + processText +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="daily-task-list">';
                    $.each(element.taskList, function (ind, elm) {
                        var completeStatus = elm.completeTime ? '<span style="color: green;">完成于：' + elm.completeTime + '</span>' : '<span style="color: red;">未完成</span>';
                        var completeCheck = elm.completeTime ? 'checked="checked"' : '';

                        html += '<div class="daily-task-info row">' +
                            '<div class="col-lg-8">' +
                            '<input type="checkbox" class="completeCheck" data-id="' + elm.id + '" ' + completeCheck + ' />' +
                            '<span class="daily-task-assignee label label-success">' + elm.assigneeName + '</span>' +
                            '<span title="' + elm.remark + '">' + elm.taskName + '</span>' +
                            '</div>' +
                            '<div class="col-lg-4">' + completeStatus + '<span class="task-delete-btn" data-id="' + elm.id + '" style="cursor: pointer; float: right;">删除</span></div>' +
                            '</div>';
                    });
                    html += '</div>' +
                        '</div>';
                });
                $('#dailyContainer').html(html);

                //删除
                $('.task-delete-btn').on('click', function () {
                    var id = $(this).attr('data-id');
                    layer.confirm('确认删除？', {
                        btn: ['确认', '取消'] //按钮
                    }, function () {
                        $.get('/daily/week/delete/' + id, function (result) {
                            layer.close();
                            loadData();
                        })
                    }, function () {
                        layer.close();
                    });

                });

                //完成
                $('.completeCheck').click(function () {
                    var checked = $(this).prop('checked');
                    var id = $(this).attr('data-id');
                    if (checked) {
                        $.get('/daily/week/complete/' + id, function (result) {
                            loadData();
                        })
                    }
                });

                $('#datetimepicker').val(result.requestData.mondayStr);
            } else {
                console.error(result.message);
            }

        })
    }

</script>
</body>
</html>